<template>
  <div class="search">
    <div class="header">
      <!-- 左侧返回 -->
      <div class="is-left">
        <a-icon type="left" @click="$router.back()" />
      </div>
      <!-- 右侧的输入框 -->
      <div>
        <a-input-search placeholder="搜索" style="width: 300px" v-model="search_val" @keyup.space="space()" />
      </div>
    </div>
     <!-- 当搜索框为空时 -->
    <div v-if="search_val==''">
      <div class="nav">
        <p>热门搜索</p>
        <ul class="nav1" v-for="(item, index) in hotlist" :key="index">
           <li>{{item.name}}</li>
        </ul>
      </div>
      <div class="nav">
        <p>搜索记录<a-icon class="icon" type="delete"  @click="del" /></p>
        <ul class="nav1" v-for="(item, index) in historylist" :key="index">
          <li @click="search_val=item">{{item}}</li>
        </ul>
      </div>
    </div> 
    <!-- 当搜索框不为空时 -->
    <div v-if="search_val!=''">
      <!-- 选项栏按钮导航 -->
      <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
      <!-- 导航下面的商品 -->
      <product-list :resultlist="resultlist"></product-list>
    </div>
  </div>
</template>

<script>
import ProductList from '../components/ProductList.vue';
export default {
  components: {  ProductList },
  data() {
    return {
      search_val: "", //搜索框的值
      resultlist:[],//搜索的结果
      hotlist:[],//热门搜索
      historylist:[],//历史记录
      value1: 0,
      value2: 'a',
      option1: [
         { text: '全部商品', value: 0 },
         { text: '新款商品', value: 1 },
         { text: '活动商品', value: 2 },
       ],
       option2: [
         { text: '默认排序', value: 'a' },
         { text: '好评排序', value: 'b' },
         { text: '销量排序', value: 'c' },
       ],
    };
  },
  computed: {},
  watch:{
    //监听搜索值
    search_val(){
      this.$http.get("/work/box-horse/freshsearch.php", {
          params: {
            search: this.search_val,
            value1:this.value1,
            value2:this.value2,
          }, 
        })
        .then((res) => {
          console.log(res);
          this.resultlist=res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听商品类型
    value1(){
      this.$http.get("/work/box-horse/freshsearch.php", {
          params: {
            search: this.search_val,
            value1:this.value1,
            value2:this.value2,
          }, 
        })
        .then((res) => {
          console.log(res);
          this.resultlist=res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    value2(){
      this.$http.get("/work/box-horse/freshsearch.php", {
          params: {
            search: this.search_val,
            value1:this.value1,
            value2:this.value2,
          }, 
        })
        .then((res) => {
          console.log(res);
          this.resultlist=res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    //将搜索值放在本地文件
    space(){
        this.historylist.unshift(this.search_val)
        console.log(this.historylist);
        localStorage.setItem("historylist", JSON.stringify(this.historylist));
    },
    del(){
      // 询问用户是否删除所有的历史数据
      this.$dialog.confirm({
        title: '提示',
        message: '你确认删除所有历史数据吗?'
      }).then(() => {
        // 用户点击确认之后要做的事:
        // 1.把historylist清空,页面上没有历史记录
        this.historylist = [];
        localStorage.removeItem('historylist');
      }).catch(() => {})
    }
  },
  mounted() {
    this.$http.get("/work/box-horse/freshtype.php")
        .then((res) => {
          console.log(res);
          this.hotlist=res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
     //如果本地存储的数据historyList有值，直接赋值给data中的historyList
        if (JSON.parse(localStorage.getItem("historylist"))) {
            this.historylist = JSON.parse(localStorage.getItem("historylist"));
        }   
  },
}
</script>
<style lang="scss" scoped>
//头部样式
.header {
  width: 100%;
  height: 4rem;
  background: $module-color;
  padding: $common-padding;
  display: flex;
  align-items: center;
  i {
    margin-right: $common-margin;
  }
}
//搜索热门和搜索历史样式
.nav{
  background-color: white;
  p{
    font-size: 18px;
    margin: 5px;
    color: black;
  }
}
.nav1 {
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    width: 22%;
    height: 30px;
    background-color: 	#DCDCDC;
    margin: 5px 5px;
    border-radius: 30px;
}
.icon{
  margin-left: 270px;
}

</style>